<template>
    <div class="account-approval-container">
        <!-- 搜索栏卡片 -->
        <el-card class="card-container search-card">
            <div class="search-container">
                <el-input v-model="searchName" placeholder="按姓名搜索" class="search-input"></el-input>
                <el-input v-model="searchEmail" placeholder="按邮箱搜索" class="search-input"></el-input>
            </div>
            <div class="button-group">
                <el-button type="primary" @click="handleSearch" class="search-button">搜索</el-button>
                <el-button type="default" @click="handleReset" class="reset-button">重置</el-button>
            </div>
        </el-card>

        <!-- 表格卡片 -->
        <el-card class="card-container table-card">
            <el-table :data="paginatedData" style="width: 100%;"
                :header-cell-style="{ backgroundColor: '#1890ff !important', color: '#fff !important', borderBottom: '2px solid white !important' }"
                row-class-name="table-row" class="custom-table rounded-table">
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="email" label="邮箱" class-name="email-column" align="left"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="isAuText" label="审核状态"></el-table-column>
                <el-table-column prop="statusText" label="账号状态"></el-table-column>
                <el-table-column prop="createTime" label="注册时间"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="success" size="small" @click="handleApprove(scope.row)">批准</el-button>
                        <el-button type="danger" size="small" @click="handleReject(scope.row)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <ElConfigProvider :locale="zhCn">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :total="tableData.length" :page-sizes="[5, 10, 20]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :prev-text="'上一页'" :next-text="'下一页'"
                        :page-sizes-text="'每页条数'" />
                </ElConfigProvider>
            </div>
        </el-card>
    </div>
</template>

<style scoped>
/* 添加卡片容器样式 */
.card-container {
    width: 70%;
    margin: 0 auto 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-card {
    padding: 20px;
    margin-top: 20px;
}

.table-card {
    padding: 20px;
}

/* 修改分页容器样式 */
.pagination-container {
    margin-top: 20px;
    text-align: center;
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

/* 调整搜索容器宽度 */
.search-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.button-group {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.search-button,
.reset-button {
    padding: 0 20px;
}

.search-input {
    width: 300px;
}

.pagination-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: auto;
    text-align: center;
}

/* 邮箱列样式 */
::v-deep .el-table .email-column {
    min-width: 500px !important;
    max-width: none !important;
    width: 500px !important;
    flex: none !important;
}

::v-deep .el-table .email-column .cell {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 0 15px !important;
}

/* 表格行样式 */
::v-deep .el-table .table-row:hover {
    background-color: #e6f7ff !important;
    /* 蓝色背景 */
    font-size: 15px;
    /* 字体放大 */
}

/* 表头样式补充 */
::v-deep .el-table__header th {
    border-bottom: 2px solid white !important;
}

/* 确保表格内容区域与表头分隔 */
::v-deep .el-table__body tr:first-child td {
    border-top: none !important;
}

/* 三级保障：加强表头样式穿透 */
::v-deep .custom-table .el-table__header-wrapper .el-table__header {
    background-color: #1890ff !important;
}

::v-deep .custom-table .el-table__header th {
    background-color: #1890ff !important;
    color: #fff !important;
    border-bottom: 2px solid white !important;
}

/* 统一悬浮行与表头的蓝色背景 */
/* 移除以下代码块 */
::v-deep .el-table .table-row:hover {
    background-color: #1890ff !important;
    /* 与表头相同的蓝色背景 */
    color: #fff !important;
    /* 文字颜色改为白色以确保可读性 */
    font-size: 15px;
    /* 字体放大效果保留 */
}

/* 移除以下代码块 */
::v-deep .el-table .table-row:hover {
    background-color: #1890ff !important;
    color: #fff !important;
    font-size: 15px !important;
    /* 仅轻微放大字体 */
    font-weight: 500;
    /* 加粗文字增强视觉效果 */
    /* 使用相对定位和z-index创建层叠效果 */
    position: relative;
    z-index: 10 !important;
    /* 增强阴影营造悬浮感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    /* 关键：使用transform-origin和scale确保仅视觉放大不影响布局 */
    transform: scale(1.015);
    transform-origin: center left;
}

/* 移除以下代码块 */
::v-deep .el-table .table-row:hover {
    background-color: #1890ff !important;
    color: #fff !important;
    font-size: 15px !important;
    /* 从16px减小到15px，缩小约6.25% */
    transform: scale(1.0025);
    /* 从1.005减小到1.0025，缩小一倍 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    /* 阴影效果也相应减弱 */
}

/* 确保没有其他样式干扰 */
::v-deep .custom-table .el-table__cell {
    background-color: transparent !important;
}

/* 悬浮效果优化：放大但不影响布局 */
::v-deep .el-table .table-row {
    transition: all 0.3s ease !important;
    position: relative;
    z-index: 1;
}

::v-deep .el-table .table-row:hover {
    background-color: #1890ff !important;
    color: #fff !important;
    font-size: 15px !important;
    /* 仅轻微放大字体 */
    font-weight: 500;
    /* 加粗文字增强视觉效果 */
    /* 使用相对定位和z-index创建层叠效果 */
    position: relative;
    z-index: 10 !important;
    /* 增强阴影营造悬浮感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    /* 关键：使用transform-origin和scale确保仅视觉放大不影响布局 */
    transform: scale(1.015);
    transform-origin: center left;
}

/* 确保没有其他样式干扰 */
::v-deep .custom-table .el-table__cell {
    background-color: transparent !important;
}

/* 悬浮效果优化：放大但不影响布局 */
::v-deep .el-table .table-row {
    transition: all 0.3s ease !important;
    position: relative;
    z-index: 1;
}

::v-deep .el-table .table-row:hover {
    background-color: #1890ff !important;
    color: #fff !important;
    font-size: 15px !important;
    /* 从16px减小到15px，缩小约6.25% */
    transform: scale(1.0025);
    /* 从1.005减小到1.0025，缩小一倍 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    /* 阴影效果也相应减弱 */
}

/* 调整单元格内边距以适应更大字体 */
::v-deep .el-table .table-row:hover .cell {
    padding: 12px 15px !important;
}

/* 表格圆角样式 */
::v-deep .rounded-table {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e8e8e8 !important;
}

/* 表头圆角 */
::v-deep .rounded-table .el-table__header-wrapper {
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
}

/* 表格行圆角补充 */
::v-deep .custom-table .el-table__body-wrapper .el-table__row:hover {
    transform: scale(1.01);
    transform-origin: center left;
    background-color: #1890ff !important;
    color: #fff !important;
    font-size: 15px;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px !important;
    padding: 0 5px;
}

/* 确保表格有足够宽度容纳放大后的内容 */
::v-deep .el-table__body {
    width: 100% !important;
}
</style>

<script>
import { ref, computed, onMounted } from 'vue';
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';

export default {
    name: 'AccountApproval',
    components: {
        ElInput,
        ElTable,
        ElTableColumn,
        ElPagination,
        ElConfigProvider,
        ElButton
    },
    setup() {
        // 搜索相关
        const searchName = ref('');
        const searchEmail = ref('');

        // 数据相关
        const tableData = ref([]);
        const allData = ref([]);

        // 分页相关
        const currentPage = ref(1);
        const pageSize = ref(10);

        // 格式化状态文本
        const formatStatus = (status) => {
            const statusMap = {
                'FROZEN': '已冻结',
                'NORMAL': '正常',
                'PENDING': '待审核'
            };
            return statusMap[status] || status;
        };

        // 从后端获取账号数据
        const fetchAccountData = async () => {
            try {
                const response = await request.get('/admin/getAllAuUser');
                if (response.code === 200) {
                    const pendingAccounts = response.data.filter(account => account.isAu === 0);
                    const formattedData = pendingAccounts.map(account => ({
                        ...account,
                        isAuText: account.isAu === 1 ? '通过' : '审核中',
                        statusText: formatStatus(account.status)
                    }));
                    tableData.value = formattedData;
                    allData.value = [...formattedData];
                } else {
                    ElMessage.error('获取数据失败: ' + response.msg);
                }
            } catch (error) {
                ElMessage.error('网络错误，无法获取数据');
                console.error(error);
            }
        };

        onMounted(() => {
            fetchAccountData();
        });

        // 分页计算属性
        const paginatedData = computed(() => {
            const startIndex = (currentPage.value - 1) * pageSize.value;
            return tableData.value.slice(startIndex, startIndex + pageSize.value);
        });

        // 方法定义
        const handleSearch = () => {
            const name = searchName.value.toLowerCase();
            const email = searchEmail.value.toLowerCase();
            tableData.value = allData.value.filter(item => {
                const matchName = name ? item.username.toLowerCase().includes(name) : true;
                const matchEmail = email ? item.email.toLowerCase().includes(email) : true;
                return matchName && matchEmail;
            });
            currentPage.value = 1;
        };

        const handleApprove = async (row) => {
            try {
                const response = await request.post('/admin/AuditUser', { id: row.id, status: 1 });
                if (response.code === 0) {
                    ElMessage.success('账号审核通过');
                    fetchAccountData();
                } else {
                    ElMessage.error('审核失败: ' + response.msg);
                }
            } catch (error) {
                ElMessage.error('审核失败: ' + (error.response?.data?.msg || '网络错误'));
            }
        };

        const handleReject = async (row) => {
            try {
                const response = await request.post('/admin/AuditUser', { id: row.id, status: 0 });
                if (response.code === 0) {
                    ElMessage.success('账号审核未通过');
                    fetchAccountData();
                } else {
                    ElMessage.error('审核失败: ' + response.msg);
                }
            } catch (error) {
                ElMessage.error('审核失败: ' + (error.response?.data?.msg || '网络错误'));
            }
        };

        const handleSizeChange = (val) => { pageSize.value = val; };
        const handleCurrentChange = (val) => { currentPage.value = val; };

        // 添加重置方法
        const handleReset = () => {
            searchName.value = '';
            searchEmail.value = '';
        };

        return {
            searchName, searchEmail, tableData, paginatedData, currentPage, pageSize,
            handleSearch, handleApprove, handleReject, handleSizeChange, handleCurrentChange, zhCn,
            handleReset // 添加这一行，暴露重置方法
        };
    }
}
</script>